<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>乐购商城</title>
    <link rel="stylesheet" href="./css/reset.css">
    <link rel="stylesheet" href="./css/common.css">
    <link rel="stylesheet" href="css/shopcart.css">
    <link rel="stylesheet" href="./css/购物车.css">
    <script src="./lib/slider/jquery-1.11.0.js"></script>

<body>
    <!-- 头部开始 -->
    <div class="head">
        <div class="black">
            <div class="container clearfix">
                <h1  class="fl">legochina.cn</h1>
                <p class="biaoti fr">
                欢迎光临<a href="" style="color: #ff6800;">乐购</a>, 请 登录\
                <a href="" style="color: #ff6800;">注册</a>
                </p>
            </div>
        </div>
    </div>
    <div class="big_inp clearfix">
        <div class="container">
            <div class="r_inp clearfix">
                <div class="gouwuche clearfix"><i></i><p>购物车 3</p></div>
                <div class="dingdan">我的订单</div>
            </div>
            <div class="l_inp">
                <input type="text" class="sousuolan" placeholder=" 创意文具">
                <i> <a href="#" title="搜索"></a></i>
            </div>
        </div>
    </div>
        <!-- logo分类区域开始 -->
    <div class="gudingfeileilan container">
        <div class="fenleilan">
            <div class="logo"></div>
        </div>
    </div>
        <!-- logo分类区域结束 -->
        <!-- 导航栏部分区域开始 -->
    <div class="navs container">
        <div class="in_nav">
            <ul class="navs clearfix">
                <li><a href="">首页</a></li>
                <li><a href="">攻略中心</a></li>
                <li><a href="">爆料站</a></li>
                <li><a href="">视频</a></li>
                <li><a href="">活动中心</a></li>
                <li><a href="">版本介绍</a></li>
                <li><a href="">英雄列表</a></li>
                <li><a href="">王者营地</a></li>
                <li><a href="">体验服</a></li>
                <li><a href="">故事站</a></li>
                <li><a href="">周边商城</a></li>
            </ul>
        </div>
    </div>
        <!-- 导航栏区域结束 -->      
<!-- 头部结束 -->



<!-- 商品购物区域开始 -->
<!-- <h1 id="site-headline">Vue仿魅族购物车结算</h1> -->
<main id="shopcart" class="container" v-cloak>
      <div class="shopcart-body" v-if='isShow'>
    <section class="cart-main">
          <header class="head">
        <nav class="cart-nav flex-vc">
              <div class="check-all row-5">
            <div class="check-wrapper"> <a href="javascript:;" class="check-ctrl" :class={checked:isSelectedAll}
                                    @click='checkAll'> <i class="icon-check"> <span></span> </i> <span class="name-check">全选</span> </a> </div>
          </div>
              <div class="singal-price row-2"> 单价（元） </div>
              <div class="number row-2"> 数量 </div>
              <div class="small-total row-2"> 小计（元） </div>
              <div class="edit row-1" @click='toggleEdit'> <span v-text='isEdit ? "编辑" : "完成"'></span> </div>
            </nav>
      </header>
          <section class="body">
        <div class="area" v-for="(kind , i) of goodsInfo" :key="kind.key">
              <div class="area-category">
            <div class="check-wrapper"> <a href="javascript:;" class="check-ctrl" :class={checked:kind.isSelected}
                                    @click='checkCategory(kind)'> <i class="icon-check"> <span></span> </i> <span class="name-check">{{kind.category}}</span> </a> </div>
          </div>
              <ul class="area-list">
            <li class="item flex-wrap" v-for="(item , index) of kind.goods" :key="item.name">
                  <div class="option flex-vc row-5">
                <div class="check-wrapper"> <a href="javascript:;" class="check-ctrl" :class={checked:item.isSelected}
                                            @click='checkSingal(kind ,item)'> <i class="icon-check"> <span></span> </i> </a> </div>
                <div class="img"> <a href="javascript:;"> <img :src=item.imgUrl alt=""> </a> </div>
                <div class="good-info"> <a href="javascript:;">
                  <h5 class="good-name">{{item.name}}</h5>
                  <p class="good-desc">{{item.tips}}</p>
                  </a> </div>
              </div>
                  <div class="singal-price row-2 flex-hvc"> {{item.price | polish }} </div>
                  <div class="number row-2 flex-hvc">
                <div class="flex-wrap input-box">
                      <button class="minus" :class="{'forbid':item.isBanMinus}"
                                            @click="minus(item)">-</button>
                      <input class="num-input" type="text" :value=item.selectNum
                                            @keyup="inputVerify(item,$event)">
                      <button class="plus" :class="{'forbid':item.isBanPlus}"
                                            @click="plus(item)">+</button>
                      <!-- <em class="upper-limit">限购<span>{{item.upperLimit}}</span>件</em>  -->
                    </div>
              </div>
                  <div class="small-total row-2 flex-hvc"> {{item.price * item.selectNum | polish()}} </div>
                  <div class="edit row-1 flex-hvc"> <i class="edit-icon" v-show="isEdit">--</i> <i class="close-btn" v-show="!isEdit" @click="alertDelConfirm(kind,index)"> <span class="shift-left"></span> <span class="shift-right"></span> </i> </div>
                </li>
          </ul>
            </div>
      </section>
        </section>
    <footer class="cart-foot-wrap">
          <div class="foot flex-vc">
        <div class="foot-left flex-vc">
              <div class="check-wrapper"> <a href="javascript:;" class="check-ctrl" :class={checked:isSelectedAll} @click='checkAll'> <i class="icon-check"> <span></span> </i> <span class="name-check">全选</span> </a> </div>
              <div class="desc"> <span class="del-selected" @click="alertDelConfirm">删除选中商品</span> <em class="num-desc"> 共有 <span class="sum"> {{sum}} </span> 件商品，已选择 <span class="sumed"> {{sumed}} </span> 件 </em> </div>
            </div>
        <div class="foot-right flex-vc">
              <div class="total-price"> 合计： <span class="totaled"> {{totaled | polish}} </span> </div>
              <a href="javascript:;" class="order flex-hvc" :class='{"none-order":isNoOrder}'> 去结算 </a> </div>
      </div>
        </footer>
    <del-confirm ref="delConfirm" @del-goods="deleteOk"></del-confirm>
  </div>
      <div class="shopcart-null flex-hvc" v-else> <i class="shopcart-icon"></i>
    <div class="tips">
          <h3 class="tips-substitle"> 购物车内还没有商品，赶紧去选购吧~~ </h3>
          <a href="./首页.html" class="back-home flex-hvc"> 返回商城首页 </a> </div>
  </div>
    </main>
<template id="del-confirm">
      <div>
    <aside class="mask-layer" :class='{"show":isAlert}'>
          <section class="confirm-box">
        <h3 class="confirm-title flex-hvc"> <span>{{confirmInfo.title}}</span> <i class="close-btn" @click="closeDelConfirm"> <span class="shift-left"></span> <span class="shift-right"></span> </i> </h3>
        <p class="confirm-con flex-hvc"> {{confirmInfo.content}} </p>
        <div class="confirm-ctrl flex-hc"> <a href="javascript:;" class="delete" :class='{"show":confirmInfo.del.isShow}'
                            @click="delSure">{{confirmInfo.del.delCon}}</a> <a href="javascript:;" class="cancel" @click='closeDelConfirm'>{{confirmInfo.cancelCon}}</a> </div>
      </section>
        </aside>
  </div>
    </template>
<script src="https://www.jq22.com/jquery/vue.min.js"></script>
<script src="js/shopcart.js"></script>
<!-- 商品购物区域结束 -->



<br><br>

<!-- 页脚开始 -->
<div class="fengexian"></div>
<!-- 页脚的4个Logo开始 -->
<div class="tupians">
<div class="sss container clearfix">
   <div class="ss">
       <div class="s1 fl"></div>
       <div class="s2 fl"></div>
       <div class="s3 fl"></div>
       <div class="s4 fl"></div>
   </div>
</div>
</div>
<!-- 页脚的4个logo结束 -->
<!-- 页脚的购物指南开始 -->
<div class="zhinan container">
<div class="inboxs clearfix">
   <ul>
       <p>购物指南</p>
       <li>购物流程</li>
       <li>购物流程</li>
       <li>购物流程</li>
       <li>购物流程</li>
   </ul>
   <ul>
       <p>购物指南</p>
       <li>购物流程</li>
       <li>购物流程</li>
       <li>购物流程</li>
       <li>购物流程</li>
   </ul>
   <ul>
       <p>购物指南</p>
       <li>购物流程</li>
       <li>购物流程</li>
       <li>购物流程</li>
       <li>购物流程</li>
   </ul>
   <ul>
       <p>购物指南</p>
       <li>购物流程</li>
       <li>购物流程</li>
       <li>购物流程</li>
       <li>购物流程</li>
   </ul>
   <ul>
       <p>购物指南</p>
       <li>购物流程</li>
       <li>购物流程</li>
       <li>购物流程</li>
      
   </ul>
</div>
<div class="logo2"></div>
</div>
<!-- 页脚的购物指南结束 -->
<!-- 页脚最下面的开始 -->
<div class="font1 container">
<ul class="clearfix">
   <li><a href="">公司简介</a></li>
   <li><a href="">lnvestor Relations</a></li>
   <li><a href="">网站联盟</a></li>
   <li><a href="">乐购招商</a></li>
   <li><a href="">机构销售</a></li>
   <li><a href="">手机乐购</a></li>
   <li><a href="">官方Blog</a></li>
   <li><a href="">热词搜索</a></li>
</ul>
<p>Copyright&emsp;(C)&emsp;乐购网&nbsp;2004-2016,&emsp;All&nbsp;Reserved</p>
</div>
<!-- 页脚最下面的结束 -->
<!-- 页脚全部结束 -->

</body>
</head>